<template>
  <div class="login">
    <el-form
      ref="ruleFormRef"
      :model="formValue"
      label-width="120px"
      class="login-form"
      label-position="top"
      status-icon
    >
      <template v-if="roomList.length !== 0">
        <el-form-item label="选择活动">
          <el-select v-model="roomType">
            <el-option
              v-for="item in roomList"
              :label="item.label"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item
        v-for="item in FIELD_LIST"
        :label="item.field === 'checkRestrict' ? '' : item.label"
        :prop="item.field"
        :key="item.field"
        :rules="item.rule"
        class="login-form-item"
      >
        <div class="login-form-item-extra" v-if="item.extra" v-html="item.extra"></div>
        <el-checkbox
          v-model="formValue[item.field]"
          :label="item.label"
          v-if="item.field === 'checkRestrict'"
        />
        <el-radio-group
          v-else-if="item.field === 'signType'"
          v-model="formValue[item.field]"
          class="ml-4"
          @change="changeSignType"
        >
          <el-radio v-for="item in signOptions" :key="item.id" :label="item.id" size="small">
            {{ item.name }}
          </el-radio>
        </el-radio-group>
        <el-input v-else v-model="formValue[item.field]" :placehoder="item.label" />
      </el-form-item>
      <el-form-item v-if="showRsa" label="rsa_private_key">
        <el-input v-model="publicKey" placehoder="" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onValidForm(ruleFormRef)">进入直播间</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import { ref, reactive, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { getFormValues, signOptions, FIELD_LIST, signEncrypt } from './config';
  import querystring from 'querystring';
  import { setLocalData } from 'src/common/utils/index';
  // form引用
  const ruleFormRef = ref();
  // 路由
  const router = useRouter();

  // 获取配置项参数
  const { roomList, ...otherFormValues } = getFormValues();
  // 房间类型
  const roomType = ref(otherFormValues.roomID);
  // 表单值
  const formValue = reactive({ ...otherFormValues });
  // 监听-改变活动
  watch(roomType, type => {
    formValue.roomID = roomList.find(item => item.value === type)?.value || '';
  });

  const publicKey = ref('');
  const showRsa = ref(false);
  const changeSignType = val => {
    console.log('changeSignType', val);
    if (val == 1) {
      showRsa.value = true;
    } else {
      showRsa.value = false;
    }
  };
  // 回调-表单检验通过
  const onCallbackValid = () => {
    const signedat = Date.parse(new Date()) / 1000;
    const roomid = formValue.roomID;
    // 签名参数
    const signParams = {
      account: formValue.account,
      username: formValue.nickName,
      app_key: formValue.appKey,
      signedat,
      email: formValue.email,
      head: ''
    };

    if (localStorage.getItem(`back_link_${roomid}`)) {
      localStorage.removeItem(`back_link_${roomid}`);
    }
    // 参与签名参数  MD5方式，安全考虑请在服务端生成签名
    const sign = signEncrypt(
      formValue.secretKey,
      formValue.signType,
      {
        roomid,
        ...signParams
      },
      publicKey.value
    );
    console.log('sign---res---', sign);
    setLocalData(roomid, {
      sign_type: formValue.signType,
      checkRestrict: formValue.checkRestrict ? 1 : 0,
      ...signParams,
      sign,
      open_id: formValue.open_id
    });
    // 路由跳转
    location.href = `${location.origin}/index?${querystring.stringify({ id: roomid })}`;
  };

  // 提交表单
  const onValidForm = async ruleFormRef => {
    // 引用为空
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid, fields) => {
      if (valid) {
        onCallbackValid();
      }
    });
  };
</script>

<style lang="less" scoped>
  .login {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: scroll;

    &-form {
      width: 420px;
      margin: 24px auto;
      padding: 0 24px;

      &-item {
        position: relative;

        &-extra {
          position: absolute;
          right: 0;
          top: -32px;
        }
      }
    }
  }
</style>
